<template>
  <div class="BigBox">
    <van-nav-bar
      class="link"
      :title="detailList.community"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in detailList.houseImg"
          :key="index"
        >
          <van-image
            width="100%"
            height="100%"
            :src="`http://121.199.51.160:8080${item}`"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="description">
      <h3>{{ detailList.title }}</h3>
      <span v-for="(item, index) in detailList.tags" :key="index">
        {{ item }}
      </span>
    </div>
    <div class="threeBox">
      <div class="price">
        <span>{{ detailList.price }}<i>/月</i></span>
        <p>租金</p>
      </div>
      <div class="roomType">
        <span>{{ detailList.roomType }}</span>
        <p>房型</p>
      </div>
      <div class="size">
        <span>{{ detailList.size }}平米</span>
        <p>面积</p>
      </div>
    </div>
    <div class="inr">
      <ul>
        <li>装修：<span>精装</span></li>
        <li>
          朝向：<span
            v-for="(item, index) in detailList.oriented"
            :key="index"
            >{{ item }}</span
          >
        </li>
        <li>
          楼层：<span>{{ detailList.floor }}</span>
        </li>
        <li>类型：<span>普通住宅</span></li>
      </ul>
    </div>
    <div class="map">
      <div class="maptitle">
        小区：<span>{{ detailList.community }}</span>
      </div>
      <div class="mapimg"></div>
    </div>

    <div class="detail-about">
      <div class="detail-title">房屋配套</div>
      <div class="detail-title">房屋概况</div>
      <div class="detail-title">猜你喜欢</div>
    </div>

    <div class="higfooter"></div>
    <div class="footer">
      <div class="col" @click="isCollectFn">
        <img
          :class="{ active: isFavorite }"
          src="http://liufusong.top:8080/img/unstar.png"
          alt=""
        />
        收藏
      </div>
      <div class="inline">在线咨询</div>
      <div class="phone">电话预约</div>
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/house'
import { isCollect, AddCollect, DelCollect } from '@/api/user'
// import baiduMap from '@/components/baiduMap.vue'
export default {
  // components: { baiduMap },
  data () {
    return {
      detailList: {},
      showMapComponent: false,
      isFavorite: ''
    }
  },
  async created () {
    // console.log(this.$route.params.id)
    const id = this.$route.params.id
    const res = await getDetail(id)
    // console.log(res)
    this.detailList = { ...res.body }
  },
  methods: {
    async isCollectFn () {
      const id = this.$route.params.id
      // 调用是否收藏接口进行判断
      const { body } = await isCollect(id)
      console.log(body)
      // 不存在是添加收藏 存在则是删除收藏
      if (!body.isFavorite) {
        await AddCollect(id)
        this.isFavorite = true
        this.$toast.success('收藏成功')
      } else {
        await DelCollect(id)
        this.isFavorite = false
        this.$toast.success('删除收藏成功')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.active {
  background-color: red !important;
}
// .BigBox{
//   background-color: #f6f5f6;
// }
* {
  margin: 0;
  padding: 0;
}
i {
  font-style: normal;
}
.link {
  background-color: #21b97a;
}
::v-deep .van-nav-bar__title,
.van-ellipsis {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
::v-deep .van-icon,
.van-icon-arrow-left,
.van-nav-bar__arrow {
  color: #fff;
}
.lunbo .my-swipe,
.van-swipe {
  height: 212px;
}
.description {
  padding: 15px 15px 0 15px;
}
.description h3 {
  font-size: 16px;
  color: #333;
  font-weight: 400;
  margin-bottom: 10px;
}
.description span {
  color: #39becd;
  background: #e1f5f8;
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
}
.threeBox {
  width: 90%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 15px auto;
  padding: 15px 0;
}
.threeBox span {
  display: inline-block;
  color: #fa5741;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}
.threeBox div {
  text-align: center;
}
.threeBox p {
  color: #999;
  font-size: 14px;
}
.threeBox i {
  font-size: 12px;
  font-weight: 400;
}
.inr {
  padding-left: 15px;
}
.inr ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.inr ul li {
  width: 50%;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
}
.inr ul li span {
  color: #333;
  padding-left: 10px;
}
.map {
  padding: 15px;
}
.maptitle {
  font-size: 14px;
  color: #666;
}
.maptitle span {
  color: #333;
}
.mapimg {
  height: 140px;
  background-color: #999;
}
// .detail-about {
//   margin-left: 0 10px;
// }
.detail-about .detail-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

// 底部
.higfooter {
  height: 50px;
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  border: 1px solid #e8e8e9;
  font-size: 17px;
  background-color: #fff;
  color: #999;
}
.footer div {
  width: 33%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.footer .col img {
  width: 16px;
  height: 16px;
}
.footer .inline {
  border-left: 1px solid #e8e8e9;
}
.footer .phone {
  flex: 1;
  height: 52px;
  color: #fff;
  background-color: #21b97a;
}
</style>
